<template>
  <div>
    <el-table :data="listData.data" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
            :rules="rules"
            ref="shenhe"
          >
            <el-form-item label="封面">
              <img width="60px" :src="props.row.imgs" alt="" />
            </el-form-item>
            <el-form-item label="名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="推荐用户">
              <span>{{ props.row.user }}</span>
            </el-form-item>
            <el-form-item label="演员">
              <span>{{ props.row.actor }}</span>
            </el-form-item>
            <el-form-item label="导演">
              <span>{{ props.row.director }}</span>
            </el-form-item>
            <el-form-item label="类型">
              <span>{{ displayType }}</span>
            </el-form-item>
            <el-form-item label="评分">
              <span>{{ props.row.score }}</span>
            </el-form-item>
            <el-form-item label="上映时间">
              <span>{{ props.row.showingon }}</span>
            </el-form-item>
            <el-form-item label="上映地区">
              <span>{{ props.row.country }}</span>
            </el-form-item>
            <el-form-item label="简介">
              <span>{{ props.row.cont }}</span>
            </el-form-item>
            <el-form-item label="推荐理由">
              <span>{{ props.row.tj_cont }}</span>
            </el-form-item>
            <el-form-item label="审核">
              <el-select
                v-model="shenhe.status"
                placeholder="审核状态"
                size="mini"
                @blur="btnTab(props.row.id)"
              >
                <el-option label="待审" value="0"></el-option>
                <el-option label="通过" value="1"></el-option>
                <el-option label="不通过" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="理由" v-show="shenhe.status == 2">
              <el-input
                v-model="shenhe.liyou"
                placeholder="审核不通过理由"
                style="width: 300px"
              ></el-input>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name"> </el-table-column>
      <el-table-column label="推荐用户" prop="user"> </el-table-column>
      <el-table-column label="类型" prop="type"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="props">
          <el-button @click="btn">提交</el-button>
          <el-button @click="del(props.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      background
      layout="->, total, prev, pager, next, jumper"
      :total="listData.total"
      :page-size="listData.pagesize"
      :current-page="listData.currebt_page"
      @current-change="changeCurrentPage($event)"
    >
    </el-pagination>
  </div>
</template>

<script>
import httpApi from "@/http";

export default {
  data() {
    return {
      listData: {
        pagesize: 3,
      },
      shenhe: {
        status: "0",
        liyou: "无",
      },
      shenheRes: {},
      rules: {
        status: [
          { required: true, message: "请选择是否审核通过", trigger: "change" },
        ],
      },
    };
  },

  methods: {
    // 点击表格
    btnTab(id) {
      httpApi.shenheApi.queryById({ id }).then((res) => {
        console.log("点击表格", res.data);
        this.shenheRes = res.data;
      });
    },
    // 提交
    btn() {
      let statusNum = parseInt(this.shenhe.status);
      let params = {
        id: this.shenheRes.data[0].id,
        status: statusNum,
        liyou: this.shenhe.liyou,
        type: this.shenheRes.data[0].type,
      };
      console.log(params);
      this.$confirm("是否提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 发送http请求,
        httpApi.shenheApi.shenhe(params).then((res) => {
          console.log("提交", res);
        });
        this.shenheList(1);
      });
    },
    // 加载审核列表
    shenheList(currebt_page) {
      httpApi.shenheApi
        .queryAllshenhe({ page: currebt_page, pagesize: 10 })
        .then((res) => {
          console.log("审核列表数据", res);
          this.listData = res.data;
          this.listData.current_page = parseInt(this.listData.current_page);
          // console.log(this.listData);
        });
    },
    /** 分页器当前页码改变时执行 */
    changeCurrentPage(currebt_page) {
      console.log(currebt_page);
      this.shenheList(currebt_page);
    },
    // 删除
    del(id) {
      console.log("删除id", id);
      this.$confirm("将删除该审核记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 发送http请求, 执行删除业务
        httpApi.shenheApi.del({ id }).then((res) => {
          console.log("删除业务结果", res);
          if (
            this.listData.data.length == 1 &&
            this.listData.current_page > 1
          ) {
            this.changeCurrentPage(this.listData.current_page - 1);
          } else {
            this.changeCurrentPage(this.listData.current_page);
          }
        });
      });
    },
  },
  mounted() {
    this.shenheList(1);
  },
  computed: {
    displayType() {
      console.log("listData:", this.listData); // 查看 listData 的值
      console.log("type:", this.listData.type); // 查看 type 属性值
      if (!this.listData) {
        // 如果 listData 没有值
        return ""; // 返回一个空字符串
      }
      switch (this.listData.type) {
        case "dianying":
          return "电影";
        case "dongman":
          return "动画";
        case "dianshi":
          return "电视剧";
        default:
          return "";
      }
    },
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>